<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let myChart = null;
onMounted(() => {
  getVehicleCount();
   myChart = echarts.init(chartRef.value);
  const option = {
    title: {
    text: '车辆出租占比',
    subtext: '数量',
    center: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    right: 'right',
    top: 'bottom',
    data: myName.value
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['25%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: myData.value
    }
  ]
  };
  myChart.setOption(option);
});
import api from '../api'
const myData = ref([]);
const myName = ref([]);
const getVehicleCount = async function(){
  let result = await api.get("api/order/getcount");
  myData.value = result.data;
  let resultt = await api.get("api/order/getname");
  myName.value = resultt.data;
  console.log(myData.value)
  console.log(myName.value)
  if (myChart) {
        // 更新图表数据
        myChart.setOption({
          series: [{
            data: myData.value.map(item => ({
              name: item.name,
              value: item.value
            }))
          }]
        });
      }
}
</script>